<template>
  <div class="flex flex-col h-full">
    <a-card>
      <div class="flex justify-between items-center">
        <a-button type="primary" class="mr-4" @click="router.go(-1)"> 返回 </a-button>
        <a-descriptions class="mt-3" :column="5">
          <a-descriptions-item label="报修单号"> {{ formState?.id || '-' }}</a-descriptions-item>
          <a-descriptions-item label="设备序列号">{{ formState?.equipmentNumber || '-' }}</a-descriptions-item>
          <a-descriptions-item label="装备名称"> {{ formState?.equipmentName || '-' }}</a-descriptions-item>
          <a-descriptions-item label="单位"> {{ formState?.unit || '-' }}</a-descriptions-item>
          <a-descriptions-item label="报修时间">{{ formState?.reportTime || '-' }}</a-descriptions-item>
          <a-descriptions-item label="品牌"> {{ formState?.brand || '-' }}</a-descriptions-item>
          <a-descriptions-item label="型号"> {{ formState?.model || '-' }}</a-descriptions-item>
          <a-descriptions-item label="配置地点"> {{ formState?.location || '-' }}</a-descriptions-item>
          <a-descriptions-item label="报修原因"> {{ formState?.reason || '-' }}</a-descriptions-item>
        </a-descriptions>
      </div>
    </a-card>
    <a-card class="mt-2 flex-1">
      <BaseTable
        :data-source="dataSource"
        column-code="000598"
        :loading="loading"
        max-fill
        :extra-height="64"
        :row-class-name="(record) => (record.isNew ? 'table-row-new' : '')"
      >
        <template #bodyCell="{ column, index, record }">
          <template v-if="column.dataIndex === 'NO'">
            {{ index + 1 }}
          </template>
          <template v-if="column.dataIndex === 'repairResultsCode'">
            <EditCell title="修复结果">
              <a-select v-model:value="record.repairResultsCode" placeholder="请选择">
                <a-select-option value="0">修复成功</a-select-option>
                <a-select-option value="1">修复失败</a-select-option>
              </a-select>
            </EditCell>
          </template>
          <template v-if="column.dataIndex === 'repairParty'">
            <EditCell title="维修方">
              <BaseInput v-model:value="record.repairParty" placeholder="请输入" @blur="editRow(record)" />
            </EditCell>
          </template>
          <template v-if="column.dataIndex === 'repairEmpId'">
            <EditCell title="维修人员">
              <SelectTable
                v-model:value="record.repairEmpName"
                type="员工"
                @select="
                  (event) => {
                    record.repairEmpName = event.empName
                    record.repairEmpId = event.empId
                    record.phone = event.phone
                    editRow(record)
                  }
                "
              />
            </EditCell>
          </template>

          <template v-if="column.dataIndex === 'phone'">
            <EditCell title="联系电话">
              <BaseInput v-model:value="record.phone" @blur="editRow(record)" />
            </EditCell>
          </template>

          <template v-if="column.dataIndex === 'cost'">
            <EditCell title="维修费用">
              <BaseInput v-model:value="record.cost" placeholder="请输入" @blur="editRow(record)" />
            </EditCell>
          </template>
          <template v-if="column.dataIndex === 'repairTime'">
            <EditCell title="维修日期">
              <a-date-picker v-model:value="record.repairTime" value-format="YYYY-MM-DD" />
            </EditCell>
          </template>
          <template v-if="column.dataIndex === 'faultTypeCode'">
            <EditCell title="故障类型">
              <SelectItem
                v-model:value="record.faultTypeCode"
                type="DT00293"
                placeholder="请选择"
                @change="
                  (event) => {
                    record.faultTypeCode = event
                    editRow(record)
                  }
                "
              />
            </EditCell>
          </template>
          <template v-if="column.dataIndex === 'description'">
            <EditCell title="维修说明">
              <BaseInput v-model:value="record.description" placeholder="请输入" @blur="editRow(record)" />
            </EditCell>
          </template>

          <template v-if="column.dataIndex === 'action'">
            <BaseButton confirm-text="确认删除？" type="text" danger size="small" @click="onDelete(record)">删除</BaseButton>
          </template>
        </template>
        <template #footer>
          <div class="text-center sticky bottom-0">
            <a-button class="mr-2" :disabled="!formState?.id" type="primary" ghost @click="addRow()"> 新增一行 </a-button>
            <a-button type="primary" :disabled="dataSource.length === 0" @click="saveNewRows()"> 保存 </a-button>
          </div>
        </template>
      </BaseTable>
    </a-card>
  </div>
</template>

<script setup>
import { ref, watchEffect } from 'vue'
import { message } from 'ant-design-vue'
import { useRoute, useRouter } from 'vue-router'
import dayjs from 'dayjs'
import BaseTable from '@/components/BaseTable'
import BaseButton from '@/components/BaseButton'
import { post } from '@/utils/request'
import EditCell from '@/components/EditCell'

const formState = ref({})
const loading = ref(false)
const dataSource = ref([])
const route = useRoute()
const router = useRouter()
const editRow = (row) => !row.isNew && fetchSave(row)
const fetchSave = async (row) => {
  row.repairId = formState.value.id
  const { code, msg } = await post('/war/equipmentRepairFeedback/doSaveEquipmentRepairFeedback', row)
  if (code !== 0) return message.error(msg || '操作失败')
  getDetailData()
  message.destroy()
  message.success(row.isNew ? '新增成功' : '修改成功')
}
const saveNewRows = async () => {
  const newRow = dataSource.value.filter((item) => item.isNew)
  newRow.forEach((item) => {
    if (item.repairResultsCode) {
      fetchSave(item)
    } else {
      message.destroy()
      message.error('请填写完整信息')
    }
  })
}

//添加行
const addRow = () => {
  const key = `row-${dataSource.value.length}`
  const addRow = { key, isNew: true, addtime: dayjs().format('YYYY-MM-DD HH:mm:ss') }
  dataSource.value.push(addRow)
}

const getMainData = async () => {
  const { data, code } = await post('/war/equipmentRepair/getEquipmentRepairList', {
    zjm: route.query?.id
  })
  if (code === 0) {
    formState.value = data[0]
  }
}
const getDetailData = async () => {
  loading.value = true
  const { data, code } = await post('/war/equipmentRepairFeedback/getEquipmentRepairFeedbackList', {
    repairId: route.query?.id
  })
  loading.value = false
  if (code === 0) {
    dataSource.value = data
  }
}
const onDelete = async (row) => {
  if (row.isNew) {
    dataSource.value = dataSource.value.filter((item) => item.key !== row.key)
  } else {
    const { code, msg } = await post('/war/equipmentRepairFeedback/doDelEquipmentRepairFeedback', { id: row.id })
    code === 0 ? getDetailData() : message.error(msg || '删除失败')
  }
}

watchEffect(() => {
  if (route && route.query?.id) {
    getMainData()
    getDetailData()
  }
})
</script>
<style lang="less" scoped>
:deep(.ant-card-head) {
  padding-left: 8px;
}
</style>
<style>
.allot .ant-select-selection-search-input {
  margin-top: 7px !important;
}
</style>
